<template>
  <div>
    <el-form
      ref="form"
      label-width="80px"
      :inline="false"
      size="normal"
      :model="formdata"
    >
      <!-- spu名称 输入框-->
      <el-form-item label="spu名称">
        <el-input v-model="formdata.spuName"></el-input>
      </el-form-item>
      <!-- 品牌 复选框 -->
      <el-form-item label="品牌">
        <el-select
          placeholder="选择属性"
          clearable
          filterable
          v-model="formdata.tmId"
        >
          <el-option
            v-for="(item, index) in brand"
            :key="item.id"
            :label="item.tmName"
            :value="item.id"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <!-- spu描述 输入框-->
      <el-form-item label="spu描述">
        <el-input
          type="textarea"
          rows="4"
          v-model="formdata.description"
        ></el-input>
      </el-form-item>
      <!-- spu图片 照片墙 -->
      <el-form-item label="spu图片">
        <!-- /name 和 url 需要处理数据 -->
        <el-upload
          action="dev-api/admin/product/upload"
          list-type="picture-card"
          :file-list="photolist"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handlesuccess">
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>
      <!-- 销售属性 输入框 复选框 表格 -->
      <el-form-item label="销售属性">
        <!-- 选择属性(三个) -->
        <el-select
          placeholder="选择"
          v-model="attrId"
          clearable
          filterable
        >
          <el-option
            v-for="(item, index) in unSelectSaleAttr"
            :key="item.id"
            :label="item.name"
            :value='`${item.id}:${item.name}`'>
          </el-option>
        </el-select>
        <!-- 增加按钮 -->
        <el-button type="primary" size="default" icon="el-icon-plus"
        :disabled="!attrId"
        @click="addSaleAttr"
          >增加销售属性</el-button>
        <el-table
          border
          stripe
          style="width: 100%"
          :data="formdata.spuSaleAttrList"
        >
          <el-table-column type="index" label="序号" width="80">
          </el-table-column>
          <el-table-column prop="saleAttrName" label="属性名" width="width">
          </el-table-column>
          <el-table-column prop="prop" label="属性值名称列表" width="width">
            <template slot-scope="{ row, $index }">
              <div>
                <!--  -->
                <el-tag
                  :key="tag.id"
                  v-for="(tag,index) in row.spuSaleAttrValueList"
                  closable
                  :disable-transitions="false"
                  @close="row.spuSaleAttrValueList.splice(index,1)"
                >
                  {{ tag.saleAttrValueName }}
                </el-tag>
                <!-- @keyup.enter.native="handleInputConfirm"属性输入框
                   -->
                <el-input
                  class="input-new-tag"
                  v-if="row.inputVisible"
                  v-model="row.inputValue"
                  ref="saveTagInput"
                  size="small"
                  @blur="handleInputConfirm(row)"
                >
                </el-input>
                <!-- @click="showInput" -->
                <!-- new标签 -->
                <el-button v-else
                  class="button-new-tag"
                  size="small"
                  @click="addSaleAttrValue(row)"
                  >+New标签</el-button
                >
              </div>
            </template>
          </el-table-column>
          <!-- 操作-删除 -->
          <el-table-column prop="prop" label="操作" width="width">
            <template slot-scope="{row,$index}">
              <el-button type="danger" 
            size="mini" @click="deletespuSaleAttrList($index)"
            icon="el-icon-delete"
            >
            </el-button>
            </template>

          </el-table-column>
        </el-table>
      </el-form-item>
      <!-- 保存和取消按钮 -->
      <el-form-item>
        <el-button type="primary" @click="savemegdata">保存</el-button>
        <el-button @click="canclebut">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
export default {
  data() {
    return {
      inputValue: '',
      dialogImageUrl: "",
      dialogVisible: false,
      row: {},
      spuid: 0,
      formdata: {
        category3Id: 0,
        description: "",
        spuImageList: [], //图片信息
        spuName: "",
        spuSaleAttrList: [],
        tmId: 0,
      },
      brand: [],
      photolist: [],
      statsList: [],
      dynamicTags:[],
      attrId:""
    };
  },
  methods: {
    //动态编辑标签
    handleClose(tag) {
        this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1);
      },
      showInput() {
        this.inputVisible = true;
        this.$nextTick(_ => {
          this.$refs.saveTagInput.$refs.input.focus();
        });
      },

    //照片墙函数回调:
    //删除图片的回调
    handleRemove(file, fileList) {
      this.photolist = fileList;//收集到照片墙上的剩下图片信息
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    handlesuccess(response, file, fileList){
      this.photolist = fileList;//收集到照片墙上的所有图片信息
    },
    //取消按钮
    canclebut() {
      this.$emit("spusendscene", 0);
      this.cleardata()
    },
    //名字和描述
    async getreqSpudata() {
      //父组件的点击修改之后才会触发的函数回调: 这里发起请求直接赋值会带有字段的
      //id编号使得 在修改与增加的时候会展示出不同
      let result = await this.$API.spu.reqSpu(this.spuid);
      if (result.code === 200) {
        this.formdata = result.data;
      }
    },
    //属性列表
    async getreqTradeMarkListdata() {
      let result = await this.$API.spu.reqTradeMarkList();
      if (result.code === 200) {
        this.brand = result.data.reverse();
      }
    },
    //获取图片列表信息
    async getreqSpuImageListdata() {
      let result = await this.$API.spu.reqSpuImageList(this.spuid);
      if (result.code === 200) {
        let arrlist = result.data;
        arrlist.forEach((element) => {
          element.name = element.imgName;
          element.url = element.imgUrl;
        });
        this.photolist = arrlist;
      }
    },
    //发起请求获取三个属性值 标签 尺寸 颜色
    async getreqBaseSaleAttrListdata() {
      let result = await this.$API.spu.reqBaseSaleAttrList();
      if (result.code === 200) {
        this.statsList = result.data;
      }
    },
    //增加销售属性按钮
    addSaleAttr(){
      const [baseSaleAttrId,saleAttrName] = this.attrId.split(':');
      let newSaleAttr = {baseSaleAttrId,saleAttrName,spuSaleAttrValueList:[]};
      console.log(this.formdata.spuSaleAttrList);
      this.formdata.spuSaleAttrList.push(newSaleAttr)
    },
    //+new标签:
    addSaleAttrValue(row){
      //展示是否显示与隐藏
      this.$set(row,"inputVisible",true);
      //收集大伙的数据
      this.$set(row,'inputValue','')
    },
    //按钮失去焦点的回调函数:
    handleInputConfirm(row) {
       const {baseSaleAttrId,inputValue} = row; //数组只需要两个字段
       if(inputValue.trim()==''){
        this.$message("属性值不可以为空,无效");
        row.inputVisible=false;
        return;
       }
       let result= row.spuSaleAttrValueList.every(item=>item.saleAttrValueName != inputValue)
       if(!result){//已经重复 为false
        this.$message("属性值重复,无效");
        row.inputVisible=false;//把输入框变为按钮;
        return;
       }else{
        let newdatalist ={baseSaleAttrId
                      ,saleAttrValueName:inputValue}
       row.spuSaleAttrValueList.push(newdatalist);
       row.inputVisible=false;//把输入框变为按钮;
       }
       
    },
    //父组件的点击修改之后才会触发的函数回调:
    initSpuData(row) {
      this.spuid = row.id;
      this.getreqSpudata();
      this.getreqTradeMarkListdata();
      this.getreqSpuImageListdata();
      this.getreqBaseSaleAttrListdata();
    },
    //删除一行属性
    deletespuSaleAttrList(index){
      this.formdata.spuSaleAttrList.splice(index,1)
    },
    async savemegdata(){
      //整理参数 照片墙 
      this.formdata.spuImageList= this.photolist.map((item)=>{
        return{//现在是imgName和imgUrl而不是imageName和imageUrl
          imgName:item.name,
          imgUrl:(item.response && item.response.data) || item.url,
        }
      })
      console.log(this.formdata);
      let result = await this.$API.spu.reqsavespu(this.formdata);
      if(result.code === 200){
        this.$message({
          type:"success",
          message:"保存成功"
        })
      }
      this.$emit("spusendscene", 0);
      this.cleardata();
    },
    //清除数据
    cleardata(){
      Object.assign(this._data,this.$options.data());
    },
    initaddchangescene(id_3){
      this.getreqTradeMarkListdata();//获取
      this.getreqBaseSaleAttrListdata();
      this.formdata.category3Id = id_3;
    }

  },
  computed:{
    unSelectSaleAttr(){
      return this.statsList.filter(item=>{
        return this.formdata.spuSaleAttrList.every(it=>{
          return item.name != it.saleAttrName;
          //不相同返回true 被保留 相同 返回false 被过滤
        })
      })
    }
  }
};
</script>

<style>
  .el-tag + .el-tag {
    margin-left: 10px;
  }
  .button-new-tag {
    margin-left: 10px;
    height: 32px;
    line-height: 30px;
    padding-top: 0;
    padding-bottom: 0;
  }
  .input-new-tag {
    width: 90px;
    margin-left: 10px;
    vertical-align: bottom;
  }
</style>
